<template lang="html">
<div>
    <div class="page-head article-head semibold">
      <img @click="goBack()" class="back" src="4_icon_back.png"></img>
    </div>
    <div class="page-main page-article">
        <div class="header semibold">{{data.title}}</div>
        <div class="author clearfix"><img class="avatar" :src="data.author.avatar ? data.author.avatar : '50_50.png'">
        <span class="like"><img :src="like_14" class="pic" @click="like()"><div class="word">喜欢</div><div class="people">{{data.likes}}人</div></span>
        <div class="author-name semibold">{{data.author.name}}</div>
        <div class="sub">{{new Date(Number(data.update_at.toString()+'000')).getFullYear()}}-{{new Date(Number(data.update_at.toString()+'000')).getMonth() + 1}}-{{new Date(Number(data.update_at.toString()+'000')).getDate()}} <span class="view-wrapper"><img class="view" src="6_view.png"></span>{{data.views}}</span></div>
        </div>
        <div class="content" v-html="data.content">
</div>
    </div>
    <div class="article-comment">
        <span class="writer" @click="commenting = true"><span class="comment-img"></span><span class="word">写下你的精彩观点...</span></span>
        <router-link :to="'/main/article/'+data._id+'/comments'"><img class="comments" src="13_comment.png"><span class="comments-icon">{{data.comments.length}}</span></router-link>
        <span class="share" @click="sharing = true"></span>
    </div>
    <div class="article-write-comment-cover" v-show="commenting==true" @click.self="commenting = false">
        <transition name='slide-bottom'>
        <div class="article-write-comment" v-show="commenting==true">
            <textarea class="writer" placeholder="写评论" v-model="comment"></textarea>
            <div @click="sendComment()" class="send">发送</div>
        </div>
        </transition>
    </div>
    <div class="article-write-share-cover" v-show="sharing==true" @click.self="share()">
        <transition name='slide-bottom'>
        <div class="article-write-share" v-show="sharing==true">
            <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div>
        </div>
        </transition>
    </div>
</div>
</template>
<style lang="postcss">
.article-head{
    text-align: left;
    .back{
        width: 0.16rem;
        margin-left: 0.15rem;
    }
}
.page-article{
    padding:0.15rem 0.15rem 0 0.15rem;
    margin-bottom: 0.5rem;
    .header{
        font-size: 0.21rem;
        line-height: 0.26rem;
    }
    .content{
        padding: 0.08rem 0;
        background-color: #fff;
        word-break:break-all;
        img{
        width: 100%;
        }
        p{
        font-size: 0.16rem;
        line-height: 0.24rem;
        margin: 0.15rem 0;
        text-align: justify;
        }
        p:first-child{
        margin-top: 0;
        }
        h1{
            font-size: 0.24rem;
        }
        h2{
            font-size: 0.22rem;
        }
        h3{
            font-size: 0.18rem;
            padding-bottom: 0.08rem;
            border-bottom: 0.01rem dashed #ddd;
        }
        h3:before {
            content: "[";
            margin-right: 0.05rem;
            color: #008CFF;
            font-size: 0.18rem;
        }
        h3:after {
            content: "]";
            margin-left: 0.05rem;
            color: #008CFF;
            font-size: 0.18rem;
        }
        a{
            color: rgb(0, 75, 136);
            border-bottom: 0.01rem dashed #ddd;
        }
        pre{
            overflow: scroll;
        }
    }
    .author{
        padding: 0.08rem 0;
        .sub{
        font-size: 0.11rem;
        line-height: 0.115rem;
        color: #A5A5A5;
        padding-left: 0.355rem;
        .view-wrapper{
            display: inline-block;
            width: 0.16rem;
            position: relative;
            line-height: 0.115rem;
            height: 0.115rem;
            margin-left:0.04rem;
            .view{
                width: 0.16rem;
                line-height: 0.115rem;
                top:-0.02rem;
                position: absolute;
            }
        }
        .top{
            color: #FF0000;
            border: 0.01rem solid #FF0000;
            font-size: 0.08rem;
            line-height: 0.095rem;
            margin-right: 0.02rem;
        }
        }
        .avatar{
            float:left;
            width:0.27rem;
        }
        .author-name{
            line-height:0.12rem;
            font-size: 0.12rem;
            margin-bottom: 0.035rem;
            padding-left: 0.355rem;
        }
        .like{
            position:relative;
            float:right;
            height: 0.26rem;
            line-height:0.15rem;
            width: 0.7rem;
            cursor: pointer;
            text-align:right;
            .pic{
                float:left;
                width: 0.26rem;
            }
            .word{
                text-align:center;
                font-size: 0.12rem;
            }
            .people{
                text-align:center;
                font-size: 0.12rem;
            }
        }
    }
}
.article-write-comment-cover{
    background: rgba(0,0,0,0.50);
    height: 100%;
    line-height: 0.5rem;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    .article-write-comment{
        position: absolute;
        bottom:0;
        height:1.35rem;
        background: #FFFFFF;
        .send{
            position: absolute;
            width: 3.45rem;
            height: 0.37rem;
            bottom: 0.077rem;
            text-align: center;
            font-size: 0.16rem;
            line-height: 0.37rem;
            left: 0.15rem;
            border: 0.01rem solid #A5A5A5;
            border-radius: 0.02rem;
            color: #A5A5A5;
        }
        .writer{
            height:0.45rem;
            width: 3.29rem;
            margin: 0.15rem;
            background: #F1F3F5;
            font-size: 0.16rem;
            line-height: 0.165rem;
            padding: 0.08rem;
            resize:none;
            outline:none;
            border:none;
            color: #333333;
        }
        .writer::placeholder {
            color: #A5A5A5;
        }
    }
}
.article-write-share-cover{
    background: rgba(0,0,0,0.50);
    height: 100%;
    line-height: 0.5rem;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    .article-write-share{
        position: absolute;
        bottom: 0px;
        text-align: center;
        left: 0;
        background-color: rgb(255, 255, 255);
        right: 0;
    }
}
.article-comment{
    display:block;
    background-color: #fff;
    height: 0.5rem;
    line-height: 0.5rem;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    .comments{
        position: absolute;
        top: 0.15rem;
        right: 0.95rem;
        width: 0.2rem;
        height: 0.2rem;
    }
    .comments-icon{
        position: absolute;
        right: 0.87rem;
        top: 0.1rem;
        display: inline-block;
        font-size: 0.09rem;
        color: #FFFFFF;
        letter-spacing: 0;
        width: 0.18rem;
        line-height: 0.125rem;
        text-align: center;
        border-radius: 0.05rem;
        background-color: #FF0000;
    }
    .collect{
        position: absolute;
        display:inline-block;
        width: 0.2rem;
        height: 0.2rem;
        right: 0.55rem;
        top: 0.15rem;
    }
    .share{
        position: absolute;;
        right: 0.4rem;
        top: 0.15rem;
        width: 0.2rem;
        height: 0.2rem;
        display: inline-block;
        overflow: hidden;
        background: url("../../static/13_share.png") no-repeat center;
        background-size: 99%;
    }
    .share:after{
        content: "";
        display: block;
        height: 100%;
        transform: translateX(-100%);
        background: inherit;
        filter: drop-shadow(0.2rem 0 0 #333333);
    }
    .writer{
        position: relative;
        display: inline-block;
        margin: 0.1rem;
        width: 2rem;
        height:0.3rem;
        line-height:0.3rem;
        background: #F1F3F5;
        color:#A5A5A5;
        border-radius: 0.5rem;
        .comment-img{
            position: absolute;;
            left: 0.15rem;
            top: 0.07rem;
            width: 0.15rem;
            height: 0.15rem;
            display: inline-block;
            overflow: hidden;
            background: url("../../static/12_write_comment.png") no-repeat center;
            background-size: 100%;
        }
        .comment-img:after{
            content: "";
            display: block;
            height: 100%;
            transform: translateX(-100%);
            background: inherit;
            filter: drop-shadow(0.15rem 0 0 #333333);
        }
        .word{
        position: absolute;
        left: 0.4rem;
        top: 0.09rem;
        font-size: 0.14rem;
        line-height: 0.14rem;
        color: #A5A5A5;
        }
    }
}
</style>
<script>
export default {
    name: 'news',
  data: function(){
    return {
      commenting: false,
      sharing: false,
      liked: false,
      comment: '',
      data: {
          title: '加载中',
          content: '加载中',
          author: {
              name: '加载中',
              avatar: '50_50.png'
          },
          update_at: Math.ceil((new Date()).getTime()/1000),
          likes: 0,
          views: 0,
          comments: [],
      }
    }
  },
  computed: {
      like_14: function(){
          return this.liked ? '14_like2.png' : '14_like.png';
      },
      id: function(){
          var pathArr =this.$route.path.split('/');
          return pathArr[3]
      }
  },
  components: {
      'list': require("../components/List")
  },
  mounted: function() {
      this.share();
                this.$http.get('/posts/'+this.id)
                .then((response) => {
                    if(response.data.code == 1){
                        var msg = response.data.msg;
                        this.data = msg;
                    }else{
                        alert(response.data.msg);
                    }
                })
                .catch((err) => {
                    alert(err);
                });
  },
  methods: {
    goBack () {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
    },
    like () {
        var url = '/posts/'+this.id+'/like';
        if(this.liked){
            this.liked = false;
            url = '/posts/'+this.id+'/like?dislike=1';
        }else{
            this.liked = true;
        }
                this.$http.get(url)
                .then((response) => {
                    if(response.data.code == 1){
                        var msg = response.data.msg;
                        this.data.likes = msg;
                    }else{
                        alert(response.data.msg);
                    }
                })
                .catch((err) => {
                    alert(err);
                });
    },
    sendComment(){
                console.log(this.comment);
            this.$http.post('/posts/'+this.id+'/comments',{
                content: this.comment,
            })
            .then((response) => {
                if(response.data.code == 1){
                        var msg = response.data.msg;
                        this.data.likes = msg;
                        alert('评论成功');
                        this.$router.push('/main/article/'+this.id+'/comments');
                }else{
                    alert(response.data.msg);
                }
            })
            .catch((err) => {
                this.$router.push('/main/login');
            });
    },
    share(){
        window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};
        let url = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5);
        let script = document.createElement('script');
        script.setAttribute('src', url);
        document.getElementsByTagName('head')[0].appendChild(script);
        this.sharing = false;
    }
  }
}
</script>